<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>弹出层效果</title>
    <style>
      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      body,
      div,
      h2 {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/1.5 Tahoma;
      }
      center {
        padding-top: 10px;
      }
      button {
        cursor: pointer;
      }
      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
        filter: alpha(
          opacity=50
        ); /* 透明度固定写法：opacity：透明效果，filter：alpha(opacity==50):兼容ie8以下 */
        display: none;
      }
      #win {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 200px;
        background: #fff;
        border: 4px solid #f90;
        margin: -102px 0 0 -202px;
        display: none;
      }
      h2 {
        font-size: 12px;
        text-align: right;
        background: #fc0;
        border-bottom: 3px solid #f90;
        padding: 5px;
      }
      h2 span {
        color: #f90;
        cursor: pointer;
        background: #fff;
        border: 1px solid #f90;
        padding: 0 2px;
      }
    </style>
    <script>
      window.onload = function () {
        let btn = document.querySelector("button");
        let overlay = document.querySelector("#overlay");
        let win = document.querySelector("#win");
        let close = document.querySelector("#close");
        btn.onclick = function () {
          overlay.style.display = "block";
          win.style.display = "block";
        };
        close.onclick = function () {
          overlay.style.display = "none";
          win.style.display = "none";
        };
      };
    </script>
  </head>
  <body>
    <div id="overlay"></div>
    <div id="win">
      <h2><span id="close">×</span></h2>
    </div>

    <div class="box">
      <button>弹出层</button>
    </div>
  </body>
</html>
